<!DOCTYPE html>
<html>
  <head>
    <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
    <script src="../node_modules/web-component-tester/browser.js"></script>
    <script type="module" src="../src/components/entity/state-info.js"></script>
  </head>
  <body>
    <test-fixture id="stateInfoSecondaryLine">
      <template>
        <state-info hass="[[hass]]" secondary-line
          ><my-elem>text</my-elem></state-info
        >
      </template>
    </test-fixture>
    <test-fixture id="stateInfo">
      <template>
        <state-info hass="[[hass]]"></state-info>
      </template>
    </test-fixture>

    <script type="module">
      import "../src/components/entity/state-info.js";
      function lightOrShadow(elem, selector) {
        return elem.shadowRoot
          ? elem.shadowRoot.querySelector(selector)
          : elem.querySelector(selector);
      }

      suite("state-info", function () {
        var si;

        setup(function () {
          si = fixture("stateInfo");
        });

        test("default values", function () {
          assert.isUndefined(si.stateObj);
          assert.isUndefined(si.inDialog);
        });

        test("has state-badge", function () {
          assert.isOk(lightOrShadow(si, "state-badge"));
        });

        test("stateObj", function (done) {
          si.stateObj = {
            entity_id: "light.demo",
            last_changed: "2017-01-01T00:00:00+00:00",
            state: "off",
            attributes: { friendly_name: "Name" },
          };
          flush(function () {
            var stateBadge = lightOrShadow(si, "state-badge");
            assert.isOk(stateBadge);
            assert.deepEqual(stateBadge.stateObj, si.stateObj);

            var name = lightOrShadow(si, ".name");
            assert.isOk(name, ".name missing");
            assert.equal(name.textContent, "Name");
            assert.equal(getComputedStyle(name).lineHeight, "40px");

            assert.isNotOk(lightOrShadow(si, "ha-relative-time"));
            done();
          });
        });

        test("relative time", function (done) {
          si.stateObj = {
            entity_id: "light.demo",
            last_changed: "2017-01-01T00:00:00+00:00",
            state: "off",
            attributes: { friendly_name: "Name" },
          };
          si.inDialog = true;
          flush(function () {
            var relativeTime = lightOrShadow(si, "ha-relative-time");
            var name = lightOrShadow(si, ".name");

            assert.isOk(relativeTime);
            assert.notEqual(relativeTime.textContent, "never");
            assert.notEqual(relativeTime.textContent, "");

            assert.isOk(name);
            assert.equal(getComputedStyle(name).lineHeight, "20px");

            si.stateObj = {
              entity_id: "light.demo",
              state: "off",
              attributes: { friendly_name: "Name" },
            };
            flush(function () {
              assert.equal(relativeTime.textContent, "never");
              done();
            });
          });
        });

        test("secondary line", function (done) {
          si = fixture("stateInfoSecondaryLine");
          si.stateObj = {
            entity_id: "light.demo",
            last_changed: "2017-01-01T00:00:00+00:00",
            state: "off",
            attributes: { friendly_name: "Name" },
          };
          si.inDialog = false;
          flush(function () {
            var name = lightOrShadow(si, ".name");
            assert.isOk(name);
            assert.equal(getComputedStyle(name).lineHeight, "20px");
            var content = si.getElementsByTagName("my-elem")[0];
            assert.isOk(content);
            assert.equal(content.textContent, "text");
            done();
          });
        });
      });
    </script>
  </body>
</html>
